<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传并预览</title>
</head>
<body>
    <p>
        <label>请选择一个图片文件： <input type="file" id="file_input"></label>
    </p>
    <div id="result"></div>
    <script type="text/javascript">
        var result =document.getElementById("result");
        var input=document.getElementById("file_input");
        if(typeof FileReader=="undefind"){
            result.innerHTML="抱歉，你的浏览器不支持 FileReader";
            input.setAttribute("disabled","disabled");
        }else{
            input.addEventListener("change",readFile,false);
        }

        function readFile(){
            var file=this.files[0];
            if(!/image\/\w+/.test(file.type)){
                alert("文件必须为图片！");
                return false;
            }
            var reader=new FileReader();
            reader.readAsDataURL(file);
            reader.onload=function(e){
                result.innerHTML='<img src="'+this.result+'" alt="" />';
            }
        }
    </script>
</body>
</html>